<template>
  <view>
    <view class="goodlist-item">
      <!-- 商品数量大于1 -->
      <view v-if="mchItemData.goods_list.length > 1">
        <view class="item-title">
          <i
            class="iconfont icon-store"
            style="font-size: 40rpx; color: 262626"
          ></i>
          <view>{{ storeMdData ? storeMdData.name : mch.name }}</view>
        </view>

        <view class="goods-item-box">
          <view class="item-gooddetails" @click="handleGood">
            <!-- 商品详情 -->
            <view class="item-gooddetails-box flex-x-sb flex-y-center">
              <scroll-view class="scroll-box" scroll-x>
                <image
                  v-for="good in mchItemData.goods_list"
                  :key="good.id"
                  class="item-gooddetails-left scorll-image"
                  :src="good.goods_pic"
                  mode="aspectFit"
                ></image>
              </scroll-view>
              <view class="scroll-right">
                {{ $t("order.total1") }}{{ mchItemData.goods_list.length
                }}{{ $t("order.total2") }}
                <text
                  class="iconfont icon-arrow-right"
                  style="font-size: 22rpx; color: #cdcdcd"
                ></text>
              </view>
            </view>
            <!-- 核销卡详情 -->
            <!-- <view class="item-gooddetails-box flex-x-sb">
                            <image
                                :src="good.goods_pic"
                                class="item-gooddetails-left"
                                mode="aspectFit"
                            />
                            <view class="verify-right">
                                <view class="text-more-1">{{
                                    good.goods_name
                                }}</view>
                                <view class="text-more-1">
                                    <text
                                        style="margin-right: 6px"
                                        v-for="(
                                            attr, attrIndex
                                        ) in good.attr_list"
                                        :key="attrIndex"
                                    >
                                        {{ attr.attr_group_name }}:{{
                                            attr.attr_name
                                        }}
                                    </text>
                                </view>
                                <view class="flex-x-sb flex-y-center">
                                    <view>赠品</view>
                                    <view>*2</view>
                                </view>
                            </view>
                        </view> -->
          </view>

          <view v-for="good in mchItemData.goods_list" :key="good.id">
            <template v-if="good.form.list.length">
              <GoodsDetail :good="good"></GoodsDetail>
              <view class="form">
                <u-form ref="yuyueref" label-width="150">
                  <u-form-item
                    v-for="item8 in good.form.list"
                    :key="item8.id"
                    :label="item8.name"
                    :border-bottom="false"
                  >
                    <u-input v-model="item8.default" />
                  </u-form-item>
                </u-form>
              </view>
            </template>
          </view>
        </view>
      </view>

      <view v-else>
        <view class="item-title">
          <i
            class="iconfont icon-store"
            style="font-size: 40rpx; color: 262626"
          ></i>
          <view>{{ storeMdData ? storeMdData.name : mch.name }}</view>
        </view>

        <view class="goods-item-box">
          <view>
            <view
              class="item-gooddetails"
              v-for="(good, goodIn) in mchItemData.goods_list"
              :key="goodIn"
            >
              <!-- 商品详情 -->
              <!-- <GoodsDetail :good="good" :isBooked="isBooked"></GoodsDetail> -->

              <!-- 后台自定义表单 -->
              <view class="form">
                <u-form ref="yuyueref" label-width="150">
                  <u-form-item
                    v-for="item8 in good.form.list"
                    :key="item8.id"
                    :label="item8.name"
                    :border-bottom="false"
                    :required="item8.required == 1"
                  >
                    <u-input v-model="item8.default" />
                  </u-form-item>
                </u-form>
              </view>

              <!-- 预约商品时间展示 -->
              <view
                v-if="isBooked && mch.goods_list[0].product_type != 3"
                class="yuyue-box"
              >
                <view class="flex-y-center flex-x-sb">
                  <view> {{ $t("alipay.time") }} </view>
                  <!-- 展示酒店预订时间  预约1 -->
                  <view
                    v-if="mch.goods_list[0].product_type == 1"
                    style="color: #8c8c8c"
                  >
                    {{ mch.yuyueData[0].date }}
                    {{ $t("order.to") }}
                    {{ mch.yuyueData[mch.yuyueData.length - 1].date }}
                  </view>
                  <!-- 展示服务预定时间 预约2-->
                  <view
                    v-else-if="mch.goods_list[0].product_type == 2"
                    style="color: #8c8c8c"
                  >
                    {{ mch.yuyueData.date }}
                    {{ mch.yuyueData.time }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 如果是普通商品可以选择配送方式 -->
      <delivery-block
        v-if="!isBooked"
        :send_type="mchItemData.send"
        @handleDelivery="handleDelivery"
      >
      </delivery-block>
      <!-- 门店自提信息展示 -->
      <shop-info
        :send_type="mchItemData.send"
        :send_list="mchItemData.delivery_type"
        :shop="mchItemData.shop"
        :index="index"
        @toShowShopPopup="handleDelivery(goodIn)"
        @switchChange="setShop"
      >
      </shop-info>

      <!-- 配送方式 -->
      <view
        class="deliverymode"
        v-if="mch.is_area == 1 && send_type == 'express'"
      >
        <view class="deliverymode-left"></view>
        <view class="deliverymode-right-two" style="color: red">{{
          $t("order.noGoods")
        }}</view>
      </view>

      <!-- 留言 -->
      <view class="message">
        <view>{{ $t("order.message") }}</view>
        <input
          type="text"
          v-model="remark"
          :placeholder="$t('order.beforeMessage')"
        />
      </view>

      <!-- 积分 -->
      <view class="goodsfreight" v-if="mchItemData.integral.forehead > 0">
        <view>
          <view
            >{{ $t("order.integral1") }}{{ mch.integral.forehead_integral
            }}{{ $t("order.integral2") }}{{ mch.integral.forehead
            }}{{ $t("order.integral3") }}</view
          >
          <view>
            <u-switch v-model="use_integral"></u-switch>
          </view>
        </view>
      </view>

      <!-- 优惠券 -->
      <view
        v-if="mchItemData.coupon_list.length"
        class="invoice-one"
        @click="couponPopupShow"
      >
        <view class="invoice-one-left">
          <view>{{ $t("common.coupon") }}</view>
          <!-- <view>已选推荐优惠</view> -->
        </view>
        <view>
          <view
            v-if="
              mchItemData.picker_coupon && mchItemData.picker_coupon.sub_price
            "
          >
            {{ $t("goods.discountTitle") }}￥{{
              mchItemData.picker_coupon.sub_price
            }}
          </view>
          <view v-else>{{ $t("common.chooseCoupon") }}</view>
          <i
            class="iconfont icon-arrow-right"
            style="color: #cdcdcd; font-size: 22rpx"
          ></i>
        </view>
      </view>
    </view>

    <!-- 选择配送方式弹窗内容 -->
    <deliveryPopup
      ref="delivery_popup"
      :send_type="mchItemData.send_type"
      :location="mch.location"
      :current_type="mchItemData.send"
      :goods_list="mchItemData.goods_list"
      :submitParams="submitParams"
      @selectShopCb="selectShopCb"
    >
    </deliveryPopup>
    <!-- 选择配送方式弹窗内容 -->

    <!-- 商品清单 -->
    <goodsPopup
      ref="good_popup"
      :goodList="mchItemData.goods_list"
    ></goodsPopup>
    <!-- 商品清单 -->

    <!-- 优惠券内容 -->
    <couponPopup
      ref="coupon_popup"
      @selectCouponCb="selectCouponCb"
      :couponList="mchItemData.coupon_list"
    >
    </couponPopup>
    <!-- 优惠券内容 -->

    <!-- 不支持配送方式展示列表区域 -->
    <view v-if="delGoodsList.length" class="goodlist-item del-goodlist">
      <view class="item-title">
        <i
          class="iconfont icon-prompt"
          style="font-size: 40rpx; color: 262626"
        ></i>
        <view>{{ $t("order.noMethod") }}</view>
      </view>

      <view class="goods-item-box">
        <view
          class="item-gooddetails"
          v-for="(good, goodIn) in delGoodsList"
          :key="goodIn"
        >
          <!-- 商品详情 -->
          <GoodsDetail :good="good"></GoodsDetail>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import goodsPopup from "./goods-popup.vue";
import deliveryPopup from "./delivery-popup.vue";
import couponPopup from "@/components/coupon/popup.vue";
import deliveryBlock from "./delivery-block.vue";
import shopInfo from "./shop-info.vue";
import http from "@/common/http.js";
import GoodsDetail from "@/components/order-submit/goods-detail.vue";

export default {
  components: {
    goodsPopup,
    deliveryPopup,
    couponPopup,
    deliveryBlock,
    shopInfo,
    GoodsDetail
  },
  data() {
    return {
      send_type: "", // 默认为配送列表的第一个
      picker_coupon: null, // 选中的优惠券
      remark: "", // 商家留言
      use_integral: 1, //使用积分
      shop: null,
      shop_id: 0,
      goodPopupData: [], // 商品清单数据
      delGoodsList: null, //需要剔除的商品列表
      goodsList: null, //自提门店列表
      mchItemData: null, //当前商家订单数据
      currentDeliveryIndex: 0 //当前配送方式的索引
    };
  },
  props: {
    // 当前商家订单信息
    mch: {
      type: Object,
      default: function () {
        return null;
      }
    },
    // 地址信息
    address: {
      type: Object,
      default: function () {
        return null;
      }
    },
    // 当前商家索引
    index: {
      type: [String, Number],
      default: "0"
    },
    //预订单数据
    submitParams: {
      type: String,
      default: ""
    },
    // 卡劵id,  主要用来获取预订单数据.后端判断是否兑换商品.返回对应订单信息
    verify_card_id: {
      type: [String, Number],
      default: 0
    }
  },
  computed: {
    // 判断是否为预约商品
    isBooked() {
      return (
        this.mch.goods_list.length == 1 &&
        this.mch.goods_list[0].product_type != 0
      );
    }
  },
  watch: {
    //    主要监听: 优惠券,配送方式,用于计算订单金额
    mchItemData: {
      handler: function (val) {
        this.$emit("setPayPrice");
      },
      deep: true
    },
    remark(val) {
      // this.$emit("setPayPrice");
      this.mchItemData.remark = val;
    },
    // 监听是否使用优惠券变化，通知父组件价格变动
    use_integral(val) {
      this.$emit("setPayPrice");
    }
  },
  // filters: {
  //   noPassByMobile(str) {
  //     if (null != str && str != undefined) {
  //       var pat = /(\d{3})\d*(\d{4})/;
  //       return str.replace(pat, "$1****$2");
  //     } else {
  //       return "";
  //     }
  //   },
  // },
  created() {
    // 筛选默认配送方式
    this.screeningDistribution();
  },
  methods: {
    //  点击门店switch
    setShop(e) {
      let { value, index, shop } = {
        ...e
      };

      this.goodsList.forEach((d, i) => {
        if (index == i) {
          d.send = value ? "shop" : "express";
          d.shop_id = value ? shop.id : "";
          d.shop = value ? shop : null;
        }
      });
    },

    // 筛选配送方式,筛选商品数据分割
    async screeningDistribution() {
      if (this.mch.goods_list[0].product_type == 3) {
        this.mchItemData = { ...this.mch, goods_list: this.mch.goods_list };
        this.mchItemData.send = "online";
        this.delGoodsList = [];
        this.mchItemDataChange();
        return;
      }

      // 快递数组
      let expressArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("express") != -1) {
          return item;
        }
      });
      let expressNum = expressArr.length;

      // 门店自提数组
      let shopArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("shop") != -1) {
          return item;
        }
      });
      let shopNum = shopArr.length;

      // 同城配送数组
      let deliveryArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("delivery") != -1) {
          return item;
        }
      });
      let deliveryNum = deliveryArr.length;
      // send为真表示切换配送方式许重新生成数据
      if (this.mchItemData?.send) {
        let delGoodsList = [];
        let goodsList = [];
        this.mch.goods_list.forEach((item) => {
          if (item.delivery_type.indexOf(this.mchItemData.send) == -1) {
            delGoodsList.push(item);
          } else {
            goodsList.push(item);
          }
        });
        if (!goodsList.length) {
          this.$utils.toast(this.$t("order.noUseMethod"));
          this.mchItemData.send = "";
          return;
        }
        this.delGoodsList = delGoodsList;
        this.mchItemData.goods_list = goodsList;
      } else {
        // 配送数量最多  商家开启当前配送方式
        if (
          expressNum >= shopNum &&
          expressNum >= deliveryNum &&
          this.mch.send_type.indexOf("express") != -1
        ) {
          // 过滤出没有当前配送方式
          this.delGoodsList = this.mch.goods_list.filter((item) => {
            if (item.delivery_type.indexOf("express") == -1) {
              return item;
            }
          });
          this.mchItemData = { ...this.mch, goods_list: expressArr };
          this.mchItemData.send = "express";
        }
        // 门店自提数量最多 商家开启当前配送方式
        else if (
          shopNum >= expressNum &&
          shopNum >= deliveryNum &&
          this.mch.send_type.indexOf("shop") != -1
        ) {
          this.mch.shop = this.mch.shop_list[0];
          // this.mch.shop = this.
          // 过滤出没有当前配送方式
          this.delGoodsList = this.mch.goods_list.filter((item) => {
            if (item.delivery_type.indexOf("shop") == -1) {
              return item;
            }
          });
          this.mchItemData = { ...this.mch, goods_list: shopArr };
          this.mchItemData.send = "shop";
        }
        // 同城配送数量最多 商家开启当前配送方式
        else if (
          deliveryNum >= expressNum &&
          deliveryNum >= shopNum &&
          this.mch.send_type.indexOf("delivery") != -1
        ) {
          // 过滤出没有当前配送方式
          this.delGoodsList = this.mch.goods_list.filter((item) => {
            if (item.delivery_type.indexOf("delivery") == -1) {
              return item;
            }
          });
          this.mchItemData = { ...this.mch, goods_list: shopArr };
          this.mchItemData.send = "delivery";
        }
      }
      // 重新更改mchItemData
      this.mchItemDataChange();
    },

    // 展示商品明细组件
    handleGood() {
      this.$refs.good_popup.setShowPayPopup();
    },

    // 获取订单信息
    async getOrder(mch_list) {
      var address_id = 0,
        address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
      if (address) {
        address_id = JSON.parse(address).id;
        uni.removeStorageSync("SELECT_ORDER_ADDRESS");
      }
      var params = {
        mch_list: JSON.stringify(mch_list),
        address_id: address_id,
        _from: "mini",
        verify_card_id: this.verify_card_id
      };

      // #ifdef APP-PLUS
      params._from = "app";
      // #endif
      const res = await this.$allrequest.order.submitPreview(params, true);
      if (res.code != 0) {
        this.$utils.toast(res.msg);
        return false;
      }
      return res;
    },

    // 重新查询商品预订单
    async mchItemDataChange() {
      let mchItemData = JSON.parse(JSON.stringify(this.mchItemData));
      let delGoodsList = this.delGoodsList;
      let options = JSON.parse(this.submitParams)[0];
      let newMchList = [];
      if (this.mch.goods_list[0].product_type == 3) {
        newMchList = this.mchItemData.goods_list;
      } else {
        // 返回当前配送方式新的商品cartid
        newMchList = options.goods_list.filter((item) => {
          // 购物车订单数据
          if (
            delGoodsList.findIndex((item1) => {
              return item1.cart_id == item.cart_id;
            }) == -1
          ) {
            return item;
          }
        });
      }

      let res = this.getOrder([
        {
          mch_id: options.mch_id,
          goods_list: newMchList
        }
      ]);

      this.mchItemData = {
        ...res.data.mch_list[0],
        remark: mchItemData.remark || "",
        send: mchItemData.send || "",
        shop: mchItemData.shop || ""
      };
    },

    // 展示配送方式组件
    selectDelivery() {
      this.$refs.delivery_popup.setShowPayPopup();
    },

    // 展示优惠券弹框组件
    couponPopupShow() {
      this.$refs.coupon_popup.setShowPopup();
    },

    // 选择配送方式回调
    selectShopCb(e) {
      if (e.type === "shop") {
        this.$set(this.mchItemData, "send", e.type);
        this.$set(this.mchItemData, "shop", e.shop);
      } else {
        this.$set(this.mchItemData, "send", e.type);
      }
      if (e.type === "delivery") {
        let submitOrderData = {};
        submitOrderData.mch_list = JSON.stringify([this.mchItemData]);
        this.$allrequest.order
          .preSubmitOrder(submitOrderData, true)
          .then((preRes) => {
            if (preRes.data.resultcode == 0) {
              // this.delivery_price = preRes.data.fee
              this.$emit("updateDeliveryPrice", preRes.data.fee);
            } else {
              uni.showToast({
                title: this.$t("order.fail"),
                duration: 2000
              });
            }
          });
      }
      // 重新生成数据
      this.screeningDistribution();
    },

    // 选择优惠券回调
    selectCouponCb(e) {
      this.$set(this.mchItemData, "picker_coupon", e.coupon);
    },

    // 点击选择配送
    handleDelivery(index) {
      this.currentDeliveryIndex = index;
      this.selectDelivery();
    },
    // 选择表单时间回调
    chooseTime(e, index) {
      this.$set(this.mchItemData.form.list[index], "default", e.detail.value);
    },
    chooseDate(e, index) {
      this.$set(this.mchItemData.form.list[index], "default", e.detail.value);
    },
    changeCheckbox(e, index) {
      this.mchItemData.form.list[index].default = e;
    },
    // 点击选择图片
    uploadImg(index) {
      this.$utils.uploadImage(
        1,
        (res) => {
          this.mchItemData.form.list[index].default = res;
        },
        () => {},
        ["compressed"]
      );
    }
  }
};
</script>

<style lang="scss" scoped>
view {
  color: #262626;
  font-size: 28rpx;
}

.goodlist-item {
  margin-top: 22rpx;
  background-color: #ffffff;
  padding: 1rpx 30rpx;
  > view {
    margin: 30rpx 0;
  }
}

.invoice-one {
  display: flex;
  justify-content: space-between;
  align-items: center;

  > view:last-child {
    display: flex;
    align-items: center;

    image {
      margin-left: 20rpx;
      width: 12rpx;
      height: 20rpx;
    }
  }

  .invoice-one-left {
    display: flex;
  }
}

.item-title {
  display: flex;
  align-items: center;

  view {
    font-size: 28rpx;
  }
}

.item-gooddetails {
  border-bottom: 1px solid #f2f2f2;
  &:nth-last-child(1) {
    border: 0;
  }
  .item-gooddetails-box {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    .item-gooddetails-left {
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
    }

    .item-gooddetails-right {
      flex: 1;
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      > view:nth-child(1) {
        font-size: 28rpx;
      }

      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
        margin: 10rpx 0;
      }

      > view:nth-child(3) {
        margin-bottom: 17rpx;
        display: flex;
        justify-content: space-between;

        view:first-child {
          font-size: 34rpx;
          font-weight: bold;
          color: #f2270c;

          text:nth-child(1) {
            font-size: 20rpx;
          }
        }

        view:last-child {
          font-size: 24rpx;
        }
      }

      > view:nth-child(4) {
        font-size: 18rpx;

        > view {
          padding: 0 5rpx;
          display: inline-block;
          font-size: 18rpx;
          color: #f22d14;
          border: 1rpx solid #ff978a;
          border-radius: 4rpx;
        }
      }
    }

    .verify-right {
      flex: 1;
      width: 0;
      margin-left: 24rpx;
      > view:nth-child(1) {
        font-size: 28rpx;
      }
      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
        margin: 10rpx 0;
      }
      > view:nth-child(3) {
        > view:nth-child(1) {
          font-size: 34rpx;
          font-weight: 600;
        }
      }
    }
  }

  .scroll-box {
    flex: 1;
    max-width: 580rpx;
    white-space: nowrap;
    .scorll-image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 10rpx;
    }
  }
}

.item-gooddetails-two {
  margin-top: 42rpx;

  .good-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .good-left-side {
      image {
        margin-right: 20rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
      }
    }

    .good-right-side {
      display: flex;
      align-items: center;

      view {
        font-size: 26rpx;
      }

      image {
        margin-left: 22rpx;
        width: 12rpx;
        height: 20rpx;
      }
    }
  }
}

.user_info {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 11rpx 0 30rpx 0;
  font-size: 26rpx;
  color: #262626;

  view:nth-child(1) {
    font-weight: 400;
    color: #f33016;
    line-height: 44rpx;
    margin-right: 8rpx;
  }
}

.deliverymode {
  margin-top: 44rpx;
  display: flex;
  justify-content: space-between;

  .deliverymode-right {
    .deliverymode-right-one {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      image {
        width: 12rpx;
        height: 20rpx;
        margin-left: 20rpx;
      }
    }

    .deliverymode-right-two {
      margin-top: 10rpx;
      display: flex;
      padding-right: 32rpx;
      justify-content: flex-end;

      view:first-child {
        margin-right: 14rpx;
        color: #f33016;
      }
    }
  }
}

.message {
  display: flex;
  align-items: center;
  font-size: 28rpx;

  input {
    text-align: right;
    flex: 1;
    margin-left: 28rpx;
    font-size: 28rpx;
  }
}

.pay-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  view {
    font-size: 36rpx;
    font-weight: bold;
  }

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.pay-way {
  padding: 0rpx 36rpx 34rpx;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1rpx solid #f2f2f2;

  .pay-way-list {
    margin-right: 24rpx;
    margin-bottom: 24rpx;
    padding: 18rpx 36rpx;
    border-radius: 30rpx;
    background-color: #f2f2f2;
    font-size: 22rpx;
    color: #bfbfbf;
  }

  .select-way-list {
    padding: 16rpx 34rpx;
    border: 1rpx solid #f2270c;
    background-color: #fcedeb;
    color: #f2270c;
  }
}

.self-take {
  padding: 38rpx 36rpx 34rpx;
  border-bottom: 1rpx solid #f2f2f2;

  .self-take-one {
    font-weight: bold;
  }

  .self-take-two {
    margin-top: 36rpx;
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
    }

    input {
      margin-left: 50rpx;
      flex: 1;
      font-size: 24rpx;
    }
  }
}

.confrim {
  margin-top: 360rpx;
  padding: 12rpx 36rpx;

  view {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #f3150c, #f14b0c);
    border-radius: 38rpx;
  }
}

.distribution-method {
  font-size: 24rpx;
  color: #fa0000;
}

.goodlist-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  > view:first-child {
    font-size: 36rpx;
    font-weight: bold;
  }

  > view:last-child {
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
    }

    image {
      margin-left: 24rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.good-list-item {
  padding: 0rpx 36rpx 24rpx;
  height: 720rpx;
  border-bottom: 1rpx solid #f2f2f2;

  .item-gooddetails-right-two {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > view:nth-child(1) {
      font-size: 24rpx;
      width: 460rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > view:nth-child(2) {
      width: 460rpx;
      margin: 26rpx 0rpx;
      display: flex;
      justify-content: space-between;

      view:first-child {
        font-size: 34rpx;
        font-weight: bold;
        color: #f2270c;
      }

      view:last-child {
        font-size: 24rpx;
      }
    }

    > view:nth-child(3) {
      view {
        display: inline-block;
        font-size: 20rpx;
        color: #f22d14;
        border: 1rpx solid #ff978a;
        border-radius: 4rpx;
      }
    }
  }
}

.goodlist-bottom {
  margin: 47rpx 0rpx;
  text-align: center;
  font-size: 22rpx;
  color: #949494;
}

.coupon-item {
  padding: 20rpx;
}

.coupon-info {
  display: flex;
  // justify-content: space-between;
  align-items: center;
}

.goodsfreight {
  margin-top: 46rpx;

  > view {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    view:last-child {
      color: #f2270c;
      font-weight: bold;
    }
  }

  > view:first-child {
    margin-top: 0rpx;

    view:last-child {
      color: #f2270c;
      font-weight: bold;
    }
  }
}

.selectShop {
  display: inline;
  border: 1rpx solid #999999;
  height: 36rpx;
  color: #999999;
  font-size: 24rpx;
  line-height: 36rpx;
  border-radius: 18rpx;
  padding: 0 18rpx;
  white-space: nowrap;
}

.shop_address {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.formBox {
  display: flex;
  width: 100%;
  flex-direction: column;

  .formName {
    margin-top: 46rpx;
  }

  .formItem {
    width: 100%;
    padding: 25rpx 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .itemTitle {
      width: 120rpx;
      min-width: 120rpx;
      text-align: right;
      margin-right: 20rpx;

      .required {
        color: #f2270c;
      }
    }

    .itemContent {
      flex: auto;

      .chooseTime {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .toChoose {
          display: flex;
          align-items: center;
          color: #333;

          text:nth-child(2) {
            width: 15rpx;
            height: 15rpx;
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            transform: rotate(-45deg);
            margin-left: 10px;
          }
        }

        .choosedPic {
          width: 100rpx;
          height: 200rpx;
        }
      }

      .textarea {
        width: 100%;
      }
    }
  }
}

.goodlist-item {
  .yuyue-box {
    margin: 30rpx 0;
    > view:nth-child(1) {
      font-size: 28rpx;
      line-height: 36rpx;

      view {
        font-size: inherit;
      }
    }
  }
}
</style>
